<template>
  <div class="hello">
    <h1>HelloWorld</h1>
    <h4>{{ this.$store.state.moduleA.age }}</h4>
    <h4>{{ this.$store.state.moduleB.name }}</h4>
    <h4>{{ this.$store.state.age }}</h4>
    <button @click="changeName">changeName</button>
    <button @click="xixi(20)">changeAge</button>
    <hr />
    <h1>root</h1>
    <h4>{{ bname }}</h4>
    <h4>{{ rootage }}</h4>
    <h4>{{ msg }}</h4>
    <button @click="hehe('欧尼酱')">changeName</button>
    <button @click="xixi(123)">changeAge</button>
    <button @click="da('修改了msg哦')">changeMsg</button>
    <button @click="dada('修改moduleB的名字')">修改moduleB的名字</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      age: 12,
    };
  },
  created() {
    console.log(this.$store);
  },
  computed: {
    ...mapState({
      name: (state) => state.name,
      msg: (state) => state.msg,
      rootage: (state) => state.age,
      bname: (state) => state.moduleB.name,
    }),
  },
  methods: {
    ...mapMutations({
      xixi: "changeAge",
      hehe: "changeName",
      da: "changeMsg",
      dada: "moduleB/changeName",
    }),
    changeName() {
      console.log(this.$store.state.moduleB);
      this.$store.commit("moduleB/changeName", "哦哈呦");
    },
  },
};
</script>
